<template>
    <!--渠道管理 width="100%"-->
    <div id='ChannelManagement' name="ChannelManagement">
        <el-card class="box-card box-card1">
        <ul class="CMnav">
            <li>
                <span>渠道商:</span>
                 <el-input
                      class="inpw"
                      popper-class="chmainp"
                      placeholder="请输入渠道商搜索"
                      v-model="input10"
                      clearable>
                </el-input>
            </li>
             <li>
                <span>渠道号:</span>
                 <el-input
                      class="inpw"
                      placeholder="请输入渠道号搜索"
                      v-model="input11"
                      clearable>
                </el-input>
            </li>
            <li>
                <el-button class="btn1" type="primary" size="small" @click="searchFn">查询</el-button>
            </li>
            <li>
                <el-button type="primary" @click="show_modal_user=true " size="small">新增渠道商</el-button>
            </li>
            <li>
                <el-button type="primary" @click="show_modal_userNum=true" size="small">新增渠道号</el-button>
            </li>
        </ul>
        </el-card>
        <!--  :row-class-name="tableRowClassName" -->
       <el-card class="box-card mt">
            <el-card class="box-card rl-card-w">
              <loading v-if='nameloading'></loading>
                 <div v-else='nameloading'>
                    <el-table
                    :data="tableData"
                    border
                    highlight-current-row
                    ref="singleTable"
                    @row-click="rowFn"
                    :row-class-name="tableRowClassName"
                    :reserve-selection="true"
                    style="width: 100%">
                    <el-table-column
                      type="index"
                      label="编号"
                      align="center"
                     >
                    </el-table-column>
                    <el-table-column
                      prop="channelName"
                      label="渠道商"
                      align="center"
                      >
                    </el-table-column>
                 
                    <el-table-column
                      label="操作"
                      align="center"
                      row-key="[1,2,3]"
                      >
                      <template slot-scope="scope">
                        <el-button type="text" size="small"   @click="show_modal_user1=true">修改</el-button>
                        <span class="red">/</span>
                        <el-button
                          @click.native.prevent="deleteRow(scope.$index, tableData)"
                          type="text"
                          size="small">
                          删除
                        </el-button>
                      </template>
                    </el-table-column>
                </el-table>
                 <div class="block">
                    <el-pagination
                      @current-change="handleCurrentChange"
                      :current-page="currentPage3"
                      :page-size="10"
                       background
                      layout="prev, pager, next, jumper"
                      :total="total">
                    </el-pagination>
                  </div>

                 </div>
            </el-card>
            <el-card class="box-card rl-card-w mr">
              <loading v-if='numloadong'></loading>

                <el-table
                    v-else="numloadong"
                    :data="tableData1"
                    border
                    stripe
                    height="520"
                    @row-click="rowFn1"
                    style="width: 100%">
                    <el-table-column
                      type="index"
                      label="编号"
                      width="100%"
                      align="center"
                     >
                    </el-table-column>
                    <el-table-column
                      prop="channelCode"
                      label="渠道号"
                      align="center"
                      >
                    </el-table-column>
                 
                    <el-table-column
                      label="操作"
                      width="100%"
                      align="center"
                      >
                      <template slot-scope="scope">
                        <el-button
                          @click.native.prevent="deleteRow1(scope.$index, tableData1)"
                          type="text"
                          size="small">
                          删除
                        </el-button>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="note"
                      label="备注"
                      align="center"
                      >
                    </el-table-column>
                </el-table>
                <el-card class="box-card black">
                  <loading v-if="describeloadig"></loading> 
                      <div v-else="describeloadig">
                          <div class="channel-tit" v-text="msgArr.tit"></div>
                          <ul class="msg-nav">
                              <li>
                                  <span>渠道商名称:</span>
                                  <span v-text="msgArr.channelName"></span>
                              </li>
                               <li>
                                  <span>登陆账号:</span>
                                  <span v-text="msgArr.loginName"></span>
                              </li>
                               <li>
                                  <span>登陆密码:</span>
                                  <span v-text="msgArr.loginPwd"></span>
                              </li>
                               <li>
                                  <span>对接人:</span>
                                  <span v-text="msgArr.userName"></span>
                              </li>
                              <li>
                                  <span>联系方式:</span>
                                  <span v-text="msgArr.userPhone"></span>
                              </li>
                          </ul>
                      </div>
                </el-card>
            </el-card>
       </el-card>
       <!-- 新增渠道商 -->
        <modal 
            title='新增渠道商'
            :show='show_modal_user' 
            :loading='loading_save' 
            @close='show_modal_user=false'
            @confirm='saveUser'>
            <div class="modal-add-account__main" >
                <ul class="modal_nav">
                    <li>
                        <span class="form-item__key1">渠道商:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入渠道商"
                            v-model="msgObj.channelName"
                            clearable>
                        </el-input>
                    </li>
                    <li>
                        <span class="form-item__key1">对接人:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入对接人"
                            v-model="msgObj.dockingPeople"
                            clearable>
                        </el-input>
                    </li>
                    <li>
                        <span class="form-item__key1">登录账号:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入登录账号"
                            v-model="msgObj.accountNumber"
                            clearable>
                        </el-input>
                    </li>
                    <li>
                        <span class="form-item__key1">登录密码:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入登录密码"
                            v-model="msgObj.passwordNumber"
                            clearable>
                        </el-input>
                    </li>
                    <!-- <li>
                        <span class="form-item__key1">联系方式:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入联系方式"
                            v-model="msgObj.tell"
                            clearable>
                        </el-input>
                    </li> -->
                </ul>
                
            </div>
        </modal>
       <!-- 修改渠道商 -->
      <modal 
            title='修改渠道商'
            :show='show_modal_user1' 
            :loading='loading_save1' 
            @close='show_modal_user1=false'
            @confirm='saveUser1'>
            <div class="modal-add-account__main" >
                <ul class="modal_nav">
                    <li>
                        <span class="form-item__key1">渠道商:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入渠道商"
                            v-model="channelName"
                            clearable>
                        </el-input>
                    </li>
                    <li>
                        <span class="form-item__key1">对接人:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入对接人"
                            v-model="dockingPeople"
                            clearable>
                        </el-input>
                    </li>
                    <li>
                        <span class="form-item__key1">登录账号:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入登录账号"
                            v-model="accountNumber"
                            clearable>
                        </el-input>
                    </li>
                    <li>
                        <span class="form-item__key1">登录密码:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入登录密码"
                            v-model="passwordNumber"
                            clearable>
                        </el-input>
                    </li>
                   <!--  <li>
                        <span class="form-item__key1">联系方式:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入联系方式"
                            v-model="tell"
                            clearable>
                        </el-input>
                    </li> -->
                </ul>
                
            </div>
        </modal>

        <modal 
            title='新增渠道号'
            :show='show_modal_userNum' 
            :loading='loading_saveNum' 
            @close='show_modal_userNum=false'
            @confirm='saveUserNum'>
            <div class="modal-add-account__main" >
                <ul class="modal_nav">
                    <li>
                        <span class="form-item__key2">渠道号:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入渠道号"
                            v-model="channelNum"
                            clearable>
                        </el-input>
                    </li>
                    <li>
                        <span class="form-item__key2">选择渠道商:</span>
                          <el-select v-model="id" placeholder="请选择" class="el_sel">
                              <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.channelName"
                                :value="item.id">
                              </el-option>
                          </el-select>
                    </li>
                     <li>
                        <span class="form-item__key2">备注:</span>
                        <el-input
                            class='modal__textareaNum'
                            type="textarea"
                            :rows="2"
                            placeholder="请输入备注"
                            v-model="remarkschannelNum">
                        </el-input>
                    </li>
                </ul>
                
            </div>
        </modal>
    </div>
</template>
<style>
   .el-table .current{
    background: #f2f2f2;
  }
</style>
<script>
//let echarts = require('echarts/lib/echarts');
import Vue from 'vue'
import {  option2 , option3} from "../echarts/option.js"
import Storage from '../utils/storage'
import { channelApi } from '../api/api'
import modal from '../components/Modal.vue'
import confirm from '../components/Confirm.vue'
import  { mapGetters, mapActions }  from 'vuex'
import loading from '../components/Loading.vue'
export default{
    data(){
        return{
           input10:"",
           loading_save1:false,
           show_modal_user1:false,
           input11:"",
           tableData1:[],
           tableData:[],
            currentPage3:1,
            show_modal_user:false,
            loading_save:false,
            show_modal_userNum:false,
            loading_saveNum:false,
            channelName:"",
            dockingPeople:"", //对接人
            phone:"",
            accountNumber:"", //账号
            passwordNumber:"",
            tell:"",
            channelNum:"",
            remarkschannelNum:"",
            msgArr:{
                channelName:"--",
                loginName:"--",
                loginPwd:"--",
                userName:"--",
                userPhone:"--",
            },
            msgObj:{
              channelName:"",
              dockingPeople:"",
              accountNumber:"",
              passwordNumber:"",
              tell:"",
            },
            options: [],
            id: null,
            nameloading:false,
            numloadong:false,
            describeloadig:false,
            currentRow:null,
            sessionid:null,
            total:1,
            types:0,
            addId:null,
            channelNumCode:null, //渠道号id
            numtype:0, //渠道号管理操作类型 
            rowId:null,
            channelNumId:null,
            TimeStr:null,
        }
    },
    components:{
        modal,
        loading,
    },
    mounted(){
        
    },
    methods:{
        ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
        setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
  
        deleteRow1(index, rows){
          
            this.$confirm('此操作将删除该渠道号, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                this.id=rows[index].id;
               this.numtype=2;
               this.saveUserNum1()
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
        },
       
        handleCurrentChange(val){
            this.currentPage3=val
            this.currentRow = val;
            this.init();
        },
    
        deleteRow(index, rows) {
            this.$confirm('此操作将删除该渠道商, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
               this.addId=rows[index].id;
               this.types=2;
               this.addChnnelname()
               this.$message({
                type: 'success',
                message: '删除成功!'
              });
              rows.splice(index, 1)
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
        },
        searchFn(){
          if((new Date().getTime())-this.TimeStr>2000){
            this.currentPage3=1;
            this.init();
          }
        },
        //初始化数据
        init(){
          let listmsg={
              sessionId:this.sessionid,
              channelName:this.input10,
              channelCode:this.input11,
              pageIndex:this.currentPage3,
              pageSize:10
            }
            this.nameloading=true
            channelApi.channelroviderPList(listmsg)
            .then((result)=>{
                  this.nameloading=false
                  this.currentPage3=result.page.pageNumber
                  this.tableData=result.page.list;
                  this.total=result.page.totalRow;
                  this.msgArr={
                        channelName:result.page.list[0].channelMap.channelName,
                        loginName:result.page.list[0].channelMap.loginName,
                        loginPwd:result.page.list[0].channelMap.loginPwd,
                        userName:result.page.list[0].channelMap.userName,
                        userPhone:result.page.list[0].channelMap.userPhone,
                     }
                     this.initChnnelname();
                   this.tableData1=result.page.list[0].channelNumberDOList;
                   this.TimeStr=new Date().getTime();
                }).catch(function(error){
                  this.nameloading=false
                    console.error(error)
                })
        },
        rowFn1(row, event, column){
            /*console.log(row.id)
            this.channelNumId=row.id*/
        },
        //点击每一行数据
        rowFn(row, event, column){
            this.rowId=row.id
            var listmsg={
              id:row.id
            }
            this.tableData1=row.channelNumberDOList;
            //修改渠道商赋值
            if(this.show_modal_user){
              this.channelName="";
              this.dockingPeople=""
              this.accountNumber=""
              //this.passwordNumber=row.channelMap.loginPwd 
              //this.tell=""
            }else{

            this.channelName=row.channelName;
            this.dockingPeople=row.userName
            this.accountNumber=row.channelMap.loginName 
            //this.passwordNumber=row.channelMap.loginPwd 
            //this.tell=row.userPhone
            }

            //每一个渠道商的详情
           this.msgArr={
              channelName:row.channelMap.channelName,
              loginName:row.channelMap.loginName,
              loginPwd:row.channelMap.loginPwd,
              userName:row.channelMap.userName,
              userPhone:row.channelMap.userPhone,
           }
        },
        tableRowClassName({row, rowIndex}){
            // console.log(rowIndex)
            // if(rowIndex==0){
            //   return "current";
            // }
        },
        initChnnelname(){
           var listmsg={
              sessionId:this.sessionid,
            }
            channelApi.channelProviderDOList(listmsg)
            .then((result)=>{
                  this.options=result;
                }).catch(function(error){
                    console.error(error)
                })
        },
        addChnnelname(){
         
           var listmsg={
              sessionId:this.sessionid,
              channelName:this.channelName,
              id:this.addId,
              name:this.dockingPeople,
              channelLoginName:this.accountNumber,
              channelPassword:this.passwordNumber,
              //phone:this.tell,
              type:this.types
            }
            channelApi.channelManageajax(listmsg)
            .then((result)=>{
                   this.init();
                   this.show_modal_user1=false
                   this.show_modal_user=false
                }).catch(function(error){
                    console.error(error)
                })
        },
        handleClick(){

        },
        saveUser1(){
          this.types=1
            this.addId=this.rowId;
            this.addChnnelname();
           
        },
        saveUser(){   

              this.channelName=this.msgObj.channelName;
              this.dockingPeople=this.msgObj.dockingPeople;
              this.accountNumber=this.msgObj.accountNumber;
              this.passwordNumber=this.msgObj.passwordNumber;
              //this.tell=this.msgObj.tell;
              this.types=0
              
            this.addChnnelname();
            this.clearchannel()
        },
        clearchannel(){
            this.msgObj.channelName=""
            this.msgObj.dockingPeople=""
            this.msgObj.accountNumber=""
            this.msgObj.passwordNumber=""
        },
        clearchannelNum(){
            this.channelNum=""
            this.remarkschannelNum=""
            this.channelNum=""
            this.id=null
        },
        //添加渠道号
        saveUserNum(){
          var listmsg={
            sessionId:this.sessionid,
            channelCode:this.channelNum,
            channelId:this.id,
            remake:this.remarkschannelNum,
            type:this.numtype
          }
            channelApi.addChannelCode(listmsg)
            .then((result)=>{
                   //this.currentPage3=1
                   this.init();
                   this.show_modal_userNum=false;
                   this.clearchannelNum()
                  //this.options=result;
                }).catch(function(error){
                    console.error(error)
                })
        },
        saveUserNum1(){
          var listmsg={
            sessionId:this.sessionid,
            channelCode:this.channelNum,
            id:this.id,
            remake:this.remarkschannelNum,
            type:this.numtype
          }
            channelApi.addChannelCode(listmsg)
            .then((result)=>{
                   this.init();
                }).catch(function(error){
                    console.error(error)
                })
        },  
        
        
    },
    mounted(){
    },
    created(){
        this.sessionid=Storage.get("51SjdAdmin_sessionId")
      
      this.init() //初始化
    },
}
</script>
<style>
  .box-card1 .el-card__body{
      padding:2px;
  }
  #ChannelManagement .inpw .el-input{
    width: 200px;
  }
  #ChannelManagement .el-input__inner{
    height: 44px;
    line-height: 44px;
  }
  #ChannelManagement .inpw .el-input__suffix{
        line-height: 40px;
      }
</style>
<style lang="scss" scoped>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";


    .el-card__body{
      padding-bottom:43px;
      margin-bottom:-9px;
      margin-top:-9px;
      
    }
    .box-card1{
      margin:0;
      padding: 28px 0 28px 20px;
    }
    .el-button--text{
      width:60px;
    }
    .el-table__empty-text{
            position: absolute;
            left: 50%;
            top: 50px!important;
    }
    #ChannelManagement{
        font-size:16px;
        color:#35373b;
    }
    .modal__textareaNum{
    float:left;
    width: 180px;
    margin-left:10px;
  }
    .form-item__key,.form-item_inp{
        float:left;
    }
    .CMnav{
        margin-bottom:33px;
    }
    .CMnav li{
         float:left;
         margin-right:14px;
    }
    .CMnav li span{
      float: left;
      height:44px;
      line-height: 44px;
      font-size: 16px;
    }
     .rl-card-w{
        width: 46%;
        float:left;
        height:1000px;
        position:relative;
      }
      .mt{
        margin-top:20px;
        padding-bottom:20px;
      }
      .mr{
        margin-left:2%;
      }
    .btn1{
       // padding:9px 34px;
    }
    .el-button--text{
        color:red;
    }
    .red{
        clolr:red;
    }
  .inpw{
    margin-left:10px;
    width:200px;
    height:34px;

  }
  .block{
    margin-top:20px;
    position:absolute;
    bottom:0;
    right:0;
  }
  .modal_nav li{
        min-height:50px;
        height:50px;
  }
  .form-item__key1{
    float:left;
    width:70px;
    height:32px;
    line-height:32px;
  }
    .form-item__key2{
        float:left;
        width:100px;
        height:32px;
        line-height:32px;
    }
    .black{
        clolor:#000;
        font-size:16px;
        font-weight:500;
        margin-top:20px;
        span{
            font-size:14px;
        }
    }
    .channel-tit{
      margin-bottom:10px;
    }
    .msg-nav li{
        height:30px;
        line-height:30px;
    }
    .msg-nav li span{
      float:left;
    }
    .msg-nav li span:nth-child(1){
       width:100px;
    }
    .el_sel{
      width:200px!important;
      margin-left:10px;
    }
    .el-table{
     height:739px!important;
   }
   .current{
      background: red;
   }
    .el-pagination{
      position:relative;
      right:-228px;
    }

</style>